<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
    <style type="text/css">
       #box{
       	position: absolute;
       	top: 100px;
       	left: 100px;
       	width: 200px;
       	height: 200px;
       	background-color: red;
       	transition: transform 2s;
       	-webkit-transform: -webkit-transform 2s;
       	-moz-transform: -moz-transform 2s;
       	-o-transform: -o-transform 2s;
       }
       #box:hover{
       	transform: rotate(45deg);
       	-webkit-transform: rotate(45deg);
       	-moz-transform: rotate(45deg);
       	-o-transform: rotate(45deg);
       	-ms-transform: rotate(45deg);
       }
    </style>
</head>
<body>
	<div id="box"></div>
</body>
</html>